<template>
    <div class="box">
        <div class="addBox">
            <el-button type="primary" :disabled="!form.receiving_account" @click="outOfManagementDialogShow = true">
                {{ "添加收款" }}
            </el-button>
            <el-select v-model="form.receiving_account" filterable remote clearable placeholder="按账户搜索"
                style="margin-left: 10px; width: 200px;" :loading="accountLoading" :remote-method="getAccountList"
                @focus="getAccountList('')" @change="getTableData">
                <el-option v-for="item in accountList" :key="item.id" :label="item.account" :value="item.id">
                </el-option>
            </el-select>
            <el-button style="margin-left: 10px;" @click="() => form.receiving_account = void 0">
                {{ "重置" }}
            </el-button>
        </div>
        <div class="tableBox" style="display: flex;flex-direction: column;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="i" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="totalAmount" label="总金额">
                </el-table-column>
                <el-table-column prop="amountPayout" label="收款金额">
                </el-table-column>
                <el-table-column prop="amountPaid" label="实收金额">
                </el-table-column>
                <el-table-column prop="receivingAccount" label="收款账户">
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
            </el-table>
            <el-pagination style="margin-left: auto;" background @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="page.currentPage" :page-sizes="[20, 50, 100]"
                :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </div>

        <el-dialog :visible.sync="outOfManagementDialogShow" @close="paymentDialogClose">
            <el-form ref="form" :model="form" label-position="top" inline>
                <el-form-item label="总金额" style="width: 450px;">
                    <el-input type="number" v-model="form.total_amount"></el-input>
                </el-form-item>
                <el-form-item label="收款金额" style="width: 450px;">
                    <el-input type="number" v-model="form.amount_payout"></el-input>
                </el-form-item>
                <el-form-item label="实收金额" style="width: 450px;">
                    <el-input type="number" v-model="form.amount_paid"></el-input>
                </el-form-item>
                <el-form-item label="实收金额" style="width: 450px;">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="() => (outOfManagementDialogShow = false)">取消</el-button>
                <el-button type="success" @click="addData" v-debounce>确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import examine from '../../api/examine';
import financeApi from '../../api/financeManage';
export default {
    data() {
        return {
            accountLoading: false,
            accountList: new Array(),
            adddata: {
                total_amount: void 0,
                amount_payout: void 0,
                amount_paid: void 0,
                receiving_account: void 0,
                remark: void 0,
            },
            timeDate: void 0,
            receivingAccount: void 0,
            tableData: new Array(),
            page: {
                currentPage: 1,
                pageSize: 50,
                total: 0,
            },
            outOfManagementDialogShow: false,
            form: {
                total_amount: void 0,
                amount_payout: void 0,
                amount_paid: void 0,
                receiving_account: void 0,
                remark: void 0,
            }
        }
    },
    mounted() {
        this.getTableData()
        this.getAccountList()
    },
    methods: {
        getAccountList(query) {
            this.accountLoading = true;
            const data = {
                accountName: query,
                currentPage: 1,
                pageSize: 10,
            }
            financeApi.getAccountList(data).then(res => {
                if (res.code === 200) {
                    this.accountList = res.data.accountList
                }
            }).finally(() => {
                this.accountLoading = false
            })
        },
        getTableData() {
            const data = {
                timeDate: this.timeDate,
                receiving_account: this.receivingAccount,
                currentPage: 1,
                pageSize: 50,
                total: 0,
            }
            examine.selectOutOfManagement(data).then(res => {
                this.tableData = res.data.data
                this.page.total = res.data.total;
                this.tableData.map((item, index) => {
                    item.i = (this.page.currentPage - 1) * this.page.pageSize + index + 1
                })
            })
        },
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getTableData();
        },
        handleCurrentChange(curPage) {
            this.page.currentPage = curPage;
            this.getTableData();
        },
        addData() {
            const data = {
                ...this.form
            }
            examine.addOutOfManagement(data).then(res => {
                this.$message(res.data)
            })
        },
        paymentDialogClose() {
            this.form.total_amount = void 0
            this.form.amount_payout = void 0
            this.form.amount_paid = void 0
            this.form.remark = void 0
        }
    },
}
</script>

<style scoped>
.box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.addBox {
    display: flex;
    align-items: center;
}

.tableBox {
    flex: 1;
}
</style>